19 CSS Menu Tutorials to Spice Up Your Web Designs
Anyone that knows what’s what about web design knows what CSS is, and how invaluable it can be to styling the navigation of a website.
The thing about CSS is that it is capable of much more than just stylistic design. It has a degree of utile functionality as well, and I’m going to point out some tutorials that make use of some of the more practical applications of CSS when designing your site’s menus.
1. Mac Style Dock Menu Navigation Bar in CSS
For those of you Mac fanatics out there who love the smooth, animated functionality of the OSX Dock, then this is the menu for you! This tutorial makes use of a quick and easy jquery script to beautify the effect.
2. Hoverbox Menu
Similarly to the fisheye expansion effect of the Mac Dock, this menu creates an onHover blowup of the image link.
3. Position Property CSS Menu
This menu makes use of the CSS position property in order to create a rollover effect. Rather than replacing the image, it simply changes the position of the existing image, which has the rollover built in.
4. Flickr-like Horizontal Menu
Like the look and feel of the Flickr navigation menu? Well, so do we! This tutorial augments the CSS with a bit of Javascript to emulate the Flickr functionality.
5. Apple Style Rollover Menu
Here’s another one for the Mac fanatics. Like the look of the menu on the Apple website? Well, this tutorial shows you how to recreate it.
6. CSS Rollover Menu
More rollovers! This time around we are shown how to make a vertical menu with rollovers for both background color AND images. Another simple tutorial, but still very good to know.
7. Digg-like Navigation Bar
Like Flickr, Digg is another website that has a very appealing navigation design. This tutorial shows how to recreate the menu using only custom images and CSS.
8. Digg-like Vertical Dropdown Menu
Here’s another Digg recreation. This time around, we’re using a little bit of Javascript to create a handy drop down menu.
9. Tabbed Search Bar
We’ll take a break from the standard navigation menu to take a look at a search bar tutorial. In this, we see how to make custom tabs that will affect the functionality of our search. Pretty handy stuff.
10. Vertical Pop-out Menu
Pop out and fly away menus are very useful for creating an easily accessible navigation tool for websites with multiple pages. It reduces clutter on a nav menu, and creates a fun and appealing little interface to boot.
11. Horizontal Dropdown Menu
Here’s a tutorial for the ever-handy drop down menu. Mouse over, drop down. Doesn’t get much easier than that.
12. Tabbed Menu
This tutorial shows how to give the appearance of tabbed pages. The tab of the active page will give the appearance of being on top of the others. Works well with Ajax and iFrames to organize dynamic content.
13. Graphic Rollover Menu (no preload)
This is always fun. This one shows how to create a menu out of a single image, and then have each menu item rollover independently.
14. Menu with Hovering Tooltips
These aren’t your daddy’s tooltips. These are embedded rollovers that display tooltip-like information upon rollover. Can be customized to display anything you want.
15. Gettyimages Search Menu (with Scriptaculous)
This tutorial recreates the useful search options menu of Getty Images. The interface is beautified a bit with the use of Scriptaculous.
16. Nested Flyover Menu
Like I mentioned earlier, fly over menus are pretty handy. Especially when you have a fly over within a fly over. Nested menus save a ton of space.
17. CSS Menu with a dash of jQuery
This is another simple mouseover drop down menu, but this time it’s kicked up a notch with a jquery script for transition effects.
18. Suckerfish Dropdown Menu
This one is the end all of mouseover drop down menus. Suckerfish is an easily applied and customizable bit of code.
19. Nested Directional Menu
And finally, rounding out our list of CSS menu tutorials, is our final nested flyover. This one, however, includes details on how to change its direction. Tired of the standard left-to-right format? Then change it to right-to-left!
